<template>
	<div>
		
		<van-search @click="toSearch" class="class-search" placeholder="请输入搜索关键词" />
		
		<div class="class-dbox">
			
			<div class="class-left">
				<div v-for="(item,index) in leftNav" @click="onCnav(index)" :class="{'active':selIndex==index}">
					<div>{{item.name}}</div>
				</div>
			</div>
			
			<div class="class-right">
				
				<div style="display: flex;flex-wrap: wrap;">
					<div v-for="(item,index) in rightGoods" class="class-right-box" @click="toList(item.id)">
						<img :src="item.icon" width="80px">
						<div>{{item.name}}</div>
					</div>
				</div>
				
			</div>
			
		</div>
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				classify:[], //所有数据
				leftNav:[], //左侧导航数据
				rightGoods:[] ,//右侧商品数据
				selIndex:0
			}
		},
		mounted() {
			this.$netClient.classify({
				
			}).then(res=>{
				// window.console.log(res.data.data)
				this.classify = res.data.data
				this.leftNav.push({
					name:'所有分类',
					pid:0
				})
				
				this.classify.forEach(item=>{
					if(item.pid == 0){
						this.leftNav.push(item)
					}
				})
				
				window.console.log(this.leftNav)
				window.console.log(this.rightGoods)
				
				this.classify.forEach(item=>{
					if(item.pid !== 0){
						this.rightGoods.push(item)
					}
				})
			})
		},
		methods:{
			onCnav(index){
				this.selIndex = index
				
				this.rightGoods = []
				let navId = this.leftNav[this.selIndex].id
				this.classify.forEach(item=>{
					if(item.pid == navId){
						this.rightGoods.push(item)
					}
				})
				
				if(this.selIndex == 0){
					this.classify.forEach(item=>{
						if(item.pid !== 0){
							this.rightGoods.push(item)
						}
					})
				}
			},
			toList(id){
				this.$router.push({
					path:'/classlist',
					query:{
						id
					}
				})
			},
			toSearch(){
				this.$router.push('search')
			}
		}
	}
</script>

<style scoped>
	.class-dbox{
		width: 100%;
		height: 80vh;
		display: flex;
		margin-top: 10vh;
	}
	.class-left{
		width: 25%;
		overflow-y: scroll;
		background-color: white;
	}
	.class-left > div{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.class-left > div > div {
		/* color: gray; */
		margin: 10px 0;
		font-size: 14px;
	}
	.class-right{
		width: 75%;
		font-size: 0.18rem;
		overflow-y: scroll;
		background-color: white;
		text-align: center;
	}
	.class-right-box{
		margin: 10px 4px;
		display: flex;
		flex-direction: column;
	}
	.active{
		color: red !important;
		border-left: 2px solid red;
	}
	.class-search{
		width: 100%;
		height: 10vh;
		position: fixed;
		top: 0;
		left: 0;
	}
</style>
